<template>
    <div>
        <el-dialog v-model="ViewdialogVisible" width="80%" align-center destroy-on-close draggable>
            <template #header="{ close }">
                <div class="dialog-header flex justify-between items-center">
                    <div>评审方案查看</div>
                    <el-icon class="el-icon--left cursor-pointer" @click="close">
                        <CircleCloseFilled color="#fff" />
                    </el-icon>
                </div>
            </template>
            <div>
                <!-- 基本信息 -->
                <div class="bg-white mt-[10px]">
                    <BaseHead>基本信息</BaseHead>
                    <div class="p-[10px]">
                        <el-descriptions title="" :column="2" border label-width="140">

                            <el-descriptions-item :span="2" label-class-name="gdlable" label="评审方案名称">{{
            ruleForm.name
        }}</el-descriptions-item>

                            <el-descriptions-item :span="2" label-class-name="gdlable" label="满分">{{
            ruleForm.fullMark
        }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>
                <!-- 评审标准 -->
                <div class="bg-white mt-[10px]">
                    <BaseHead>评审标准</BaseHead>
                    <div class="p-[10px]">
                        <el-table :data="ruleForm.reviewStandardDTOs" border style="width: 100%">
                            <el-table-column align="center" label="一级标准" width="600">
                                <template #default="scope">
                                    {{ scope.row.name }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="二级标准">
                                <template #default="scope">
                                    <div class="mt-[10px]" v-for="(item, index) in scope.row.lvl2Names" :key="index">{{
            item.value }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="分数" width="120">
                                <template #default="scope">
                                    <div class="mt-[10px]" v-for="(item, index) in scope.row.lvl2Marks" :key="index">{{
                                        item.value }}
                                    </div>
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
const ViewdialogVisible = defineModel();

const ruleForm = reactive({
    name: '',
    fullMark: '',
    businessType: 'project',
    reviewStandardDTOs: [{
        name: '',
        lvl2Names: [{ value: '' }],
        lvl2Marks: [{ value: '' }]
    }]
});
const tableData = reactive([
]);

const isJSON = (str) => {
    if (typeof str === 'string') {
        try {
            const obj = JSON.parse(str);
            return typeof obj === 'object' && obj !== null;
        } catch (e) {
            return false;
        }
    }
    return false;
}

const getRuleForm = (i) => {
    for (const key in i) {
        ruleForm[key] = i[key];
    }
    if (i.reviewStandardList && i.reviewStandardList.length > 0) {
        ruleForm.reviewStandardDTOs = i.reviewStandardList.map(item => {
            if (isJSON(item.lvl2Names)) {
                return {
                    name: item.name,
                    lvl2Names: JSON.parse(item.lvl2Names),
                    lvl2Marks: item.lvl2Marks.split(',').map(item => ({ value: item }))
                }
            } else {
                return {
                    name: item.name,
                    lvl2Names: item.lvl2Names.split(',').map(item => ({ value: item })),
                    lvl2Marks: item.lvl2Marks.split(',').map(item => ({ value: item }))
                }
            }

        })
    }

}
defineExpose({
    getRuleForm
})
</script>
<style lang="scss">
.gdlable {
    width: 140px;
}
</style>
<style scoped lang="scss">
@import url("@/views/achievement/index.scss");

:deep(.el-select--default) {


    .el-select__wrapper.is-disabled {
        background-color: #fff;
        box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
        color: #606266;
        cursor: not-allowed;

        .el-select__selected-item {
            color: #606266;
        }
    }

    .el-select__suffix {
        display: none;
    }
}
</style>
